<template>
  <div>
    <tableComponents :pagination="{ currentPage, pageSize, total: list.all_num }" @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange" @sendUserSearch="receive_search" :searchData="userSearchData" :isHaveExport="false" :isHaveAdd="false">
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list.data" stripe v-loading="loading" header-row-class-name="head_color" tooltip-effect="dark"
            style="width: 99.8%">
          <el-table-column label="排序" sortable :sort-method="sorta" align="center" width="80">
            <template slot-scope="scope">
              <div>
                <el-input @change="sortNew(scope.$index, scope.row)" v-enterNumber v-model="scope.row.sort" autocomplete="off" size="small">
                </el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="封面" min-width="180" align="center">
            <template slot-scope="scope">
              <div class="tc">
                <img style="width:150px" :src="$fnc.getImgUrl(scope.row.cover)" />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="直播间信息" min-width="220">
            <template slot-scope="scope">
              <div class="user_table">
                <span>用户名：</span>
                <small>{{ scope.row.username || "----" }}</small>
                <br />
                <span>用户昵称：</span>
                <small>{{ scope.row.nickname || "----" }}</small>
                <br />
                <span>标题：</span>
                <small>{{ scope.row.title || "----" }}</small>
                <br />
                <span>直播室IM账号：</span>
                <small>{{ scope.row.im || "----" }}</small>
                <br />
                <span>虚拟播放量：</span>
                <small>{{ scope.row.virtual_playback || "0" }}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="关注" min-width="220">
            <template slot-scope="scope">
              <div class="user_table">
                <span>关注量：</span>
                <small>{{ scope.row.attention || 0 }}</small>
                <br />
                <span>累计播放量：</span>
                <small>{{ scope.row.playback || 0 }}</small>
                <br />
                <span>当前播放量：</span>
                <small>{{ scope.row.playback_current || 0 }}</small>
                <br />
                <span>直播间热度：</span>
                <small>{{ scope.row.like_number || 0 }}</small>
                <br />
                <span v-show="scope.row.beishu && scope.row.beishu != 0">人气倍数：</span>
                <small v-show="scope.row.beishu && scope.row.beishu != 0">{{
                  scope.row.beishu || 0
                }}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="220">
            <template slot-scope="scope">
              <div class="user_table">
                <span>直播状态：</span>
                <small>{{
                  scope.row.status == 1 ? "直播中" : "未直播" || "----"
                }}</small>
                <br />
                <span>美颜状态：</span>
                <small>{{ scope.row.beauty == 1 ? "开启" : "关闭" }}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="是否开启" min-width="125">
            <template slot-scope="scope">
              <el-switch class="zdySwith" :width="82" v-model="scope.row.show" active-color="#1aad19" inactive-color="#ffffff" active-text="已开启"
                  inactive-text="已关闭" active-value="1" @change="getIs($event, scope.row)" inactive-value="0"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="精选主播" min-width="125">
            <template slot-scope="scope">
              <el-switch class="zdySwith" :width="82" v-model="scope.row.is_recommend" active-color="#1aad19" inactive-color="#ffffff"
                  active-text="已开启" inactive-text="已关闭" active-value="1" @change="change_recomment($event, scope.row)" inactive-value="0"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" min-width="220">
            <template slot-scope="scope">
              <div class="user_table">
                {{ scope.row.created_time | getTimeFormat }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-row class="myblank">
                <el-button :loading="$store.state.isLoading" size="mini" @click="editbtn(scope.row)" type="primary">编辑</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" @click="
                    $router.push({
                      path: '/index/live/file',
                      query: { uid: scope.row.uid }
                    })
                  " type="primary">回放</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" @click="gotocontrol(scope.row)" type="success">控制中心</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog :close-on-click-modal="false" title="编辑" class="tl size_13" width="800px" :visible.sync="dialogFormVisible">
      <el-form :model="live_single" ref="form" label-width="120px">
        <el-form-item label="人气倍数设置：">
          <el-col :span="12">
            <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="live_single.beishu" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="标题：">
          <el-col :span="12">
            <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="live_single.title" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="虚拟播放量：">
          <el-col :span="12">
            <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="live_single.virtual_playback" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="封面：" prop="avatar">
          <el-col :span="12">
            <el-input v-model="live_single.cover" autocomplete="off" disabled class="mar_bottom_5"></el-input>
            <uploadpic :piclink="live_single.cover" :width="150" :height="150" :is_more="false" @send_pic="onSuccess"></uploadpic>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button :loading="$store.state.isLoading" type="primary" @click="editlive(live_single)">编 辑</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import uploadpic from "@/components/page/pic/up_pic";
import { liveListSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data () {
    return {
      userSearchData: liveListSearchData,
      dialogFormVisible: false,
      live_single: {
        piclink: ""
      },
      current: "",
      loading: false,
      list: [],
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      row: {},

      showCity: true
    };
  },
  components: {
    uploadpic
  },
  methods: {
    sorta (a, b) {
      return b - a;
    },
    random (len) {
      let arr_ = [];
      //生成1-100的数组
      for (let i = 0; i < 100; i++) {
        arr_[i] = i;
      }
      arr_.sort(function () {
        return 0.5 - Math.random();
      }); //随机打乱数组排序
      let arr = [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ];
      arr.sort(function () {
        return 0.5 - Math.random();
      }); //随机打乱数组排序
      let arrs = arr.concat(arr_); //合并两数组
      arrs.sort(function () {
        return 0.5 - Math.random();
      }); //随机打乱数组排序，获得一个含有1-100和大小写的52      字母元素的数组
      //循环遍历拼接随机数
      let str = "";
      for (let i = 0; i < len; i++) {
        //Math.floor（Math.random()*153 ）意思是0~1（不含1）*153。随机取得1-153（不含153）范围的随机数，向下取整可获得1-152范围的索引数值
        let index = Math.floor(Math.random() * 153);
        str += arrs[index];
      }
      return str;
    },
    gotocontrol (item) {
      if (!item.im) {
        this.$fnc.alertError("当前直播间聊天室未开通");
        return;
      }
      var url = `/index/live/live_control?id=${item.id}&mid=${item.uid}&im=${encodeURIComponent(item.im)}&VNK=${this.random(6)}`;
      this.$store.commit("addbreadcrumbs", {
        title: "直播控制中心",
        url: url
      });
      this.$router.push(url);
    },
    sortNew (index, row) {
      var params = {};
      params.id = row.id;
      params.sort = row.sort;
      // this.$api.getMenu.menuSortInput(params).then(res => {
      //   if (res.data.code == 200) {
      //     this.$store.dispatch("getMenu");
      //   }
      // });
    },
    onSuccess (pic) {
      console.log(pic);
      this.live_single.cover = pic;
    },
    change_recomment (val, row) {
      var params = {};
      params.id = row.id;
      params.is_recommend = val;
      this.editlive(params);
    },
    getIs (val, row) {
      var params = {};
      params.id = row.id;
      params.show = val;
      this.editlive(params);
    },

    changeRadio () {
      this.showCity = false;
      setTimeout(() => {
        this.showCity = true;
      }, 500);
    },
    editlive (item) {
      var params = item;
      this.$api.getPage.edit_livelist(params).then(res => {
        if (res.data.code == 200) {
          this.dialogFormVisible = false;
          this.$fnc.alertSuccess(res.data.result);
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    editbtn (item) {
      this.live_single = item;
      this.dialogFormVisible = true;
    },

    receive_search (obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    getNewsAll (data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      this.$api.getPage.get_livelist(params).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange (val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },

    reload () {
      this.getNewsAll(this.searchAll);
    }
  },
  beforeCreate () { },
  created () {
    this.getNewsAll();
  },
  computed: {}
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}
</style>
